<template>
  <div>
    <van-divider>
      <van-tag plain size="medium" type="primary" @click="showPopup = true">
        添加{{ getOptionsTarget($types.periodTypes, 'value', period, 'text') }}因子＋
      </van-tag>
    </van-divider>
    <van-row>
      <van-col v-for="(items, field, i) in inputForm" :key="i" :span="12">
        <van-tag v-for="(value, order, j) in items" :key="i + j" closeable plain size="medium" color="#ffe1e1"
                 text-color="#ad0000"
                 @close="onDelete(field, order)">
          <div>
            <span>{{ getTitle(field) }}</span>
            <span>{{ getLabel(order) }}</span>
            <span>{{ value }}</span>
          </div>
        </van-tag>
      </van-col>
    </van-row>
    <br/>
    <van-popup v-model="showPopup" position="bottom" :style="{ height: '80%' }">
      <van-nav-bar title="添加因子" left-text="取消" right-text="确认" @click-left="showPopup = false"
                   @click-right="onSubmit"/>
      <p>{{ factorList[fieldForm.index].description }}</p>
      <van-form colon>
        <van-cell-group :border="false">
          <van-field v-model="fieldForm.index" readonly input-align="right" label="因子" placeholder="请选择因子"
                     :rules="[{ required: true }]">
            <template #input>
              <select v-model="fieldForm.index" @change="fieldForm.forth = '0'">
                <option v-for="(item, index) in factorList" :key="item.field" :value="index">
                  {{ getTitle(item.field) }}
                </option>
              </select>
            </template>
          </van-field>
          <van-field v-model="fieldForm.forth" readonly input-align="right" label="索引">
            <template #input>
              <van-radio-group v-model="fieldForm.forth" direction="horizontal">
                <van-radio v-for="(i, n) in factorList[fieldForm.index].before" :key="i" :name="n.toString()">
                  {{ n }}
                </van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field v-model="fieldForm.order" readonly input-align="right" label="关系" placeholder="请选择关系"
                     :rules="[{ required: true }]">
            <template #input>
              <select v-model="fieldForm.order">
                <option v-for="(item) in $types.relationTypes" :key="item.value" :value="item.value">
                  {{ item.text }}
                </option>
              </select>
            </template>
          </van-field>
          <van-field v-model="fieldForm.value" input-align="right" label="赋值" :value="fieldForm.action"
                     placeholder="请输入赋值" :rules="[{ required: true }]">
          </van-field>
        </van-cell-group>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import {getOptionsTarget} from '@/utils'

export default {
  props: {
    resultForm: Object,
    factorList: Array,
    period: String
  },
  model: {
    prop: 'resultForm',
    event: 'change'
  },
  data() {
    return {
      inputForm: {},
      fieldForm: {
        index: 0,
        forth: '0',
        order: 'eq',
        value: null
      },
      showPopup: false
    }
  },
  watch: {
    resultForm: {
      handler(newValue) {
        this.inputForm = newValue
      },
      immediate: true,
      deep: true
    },
    inputForm: {
      handler(newValue) {
        this.$emit('change', newValue)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getOptionsTarget: getOptionsTarget,
    getLabel(filed) {
      return getOptionsTarget(this.$types.relationTypes, 'value', filed, 'text')
    },
    getTitle(field) {
      let tempArray = field.split('_')
      for (let i = 0; i < this.factorList.length; i++) {
        if (this.factorList[i].field === tempArray[0]) {
          let title = tempArray.length > 1 ? `${this.factorList[i].title}[${tempArray[1]}]` : this.factorList[i].title
          if (this.factorList[i].typeof === 'string') {
            return title
          } else {
            return getOptionsTarget(this.$types.periodTypes, 'value', this.period, 'text') + title
          }
        }
      }
    },
    onSubmit() {
      let item = this.factorList[parseInt(this.fieldForm.index)], temp = {}
      let node = parseInt(this.fieldForm.forth) > 0 ? `${item.field}_${this.fieldForm.forth}` : item.field
      temp[this.fieldForm.order] = item.typeof === 'string' ? this.fieldForm.value : parseFloat(this.fieldForm.value)
      if (Object.hasOwnProperty.call(this.inputForm, node)) {
        temp = Object.assign(this.inputForm[node], temp)
      }
      this.$set(this.inputForm, node, temp)
      this.showPopup = false
    },
    onDelete(field, order) {
      this.$delete(this.inputForm[field], order)
      if (!Object.keys(this.inputForm[field]).length) {
        this.$delete(this.inputForm, field)
      }
    }
  }
}
</script>

<style scoped>
p {
  font-size: 14px;
  text-align: justify-all;
  padding: 0 15px;
  color: #ee0a24;
}

.add-div {
  text-align: center;
}

.van-col {
  padding: 5px 10px;
}

.van-tag {
  margin: 3px;
}
</style>
